<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-form ref="queryForm" :model="queryForm" label-width="80px" class="bg-white pd-12px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="异动学期:" :label-width="formLabelWidth">
              <el-select v-model="queryForm.grade">
                <el-option
                  v-for="item in options.grade"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="异动大类:" :label-width="formLabelWidth" @change="getAbnormalTypes">
              <el-select v-model="queryForm.classId">
                <el-option
                  v-for="item in options.abnormalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="异动类型" :label-width="formLabelWidth" prop="studentCategory">
              <el-select v-model="queryForm.typeId">
                <el-option
                  v-for="item in options.abnormalType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学院:" :label-width="formLabelWidth" prop="faculty">
              <el-select v-model="queryForm.faculty" filterable @change="changeFaculty">
                <el-option
                  v-for="item in options.faculty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="专业:" :label-width="formLabelWidth" prop="profession">
              <el-select v-model="queryForm.profession" filterable>
                <el-option
                  v-for="item in options.profession"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培养层次:" :label-width="formLabelWidth" prop="trainingLevel">
              <el-select v-model="queryForm.trainingLevel">
                <el-option
                  v-for="item in options.trainingLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <div class="empty-box"></div>
          </el-col>
          <el-col :span="6">
            <el-form-item class="float-right">
              <el-button @click="reset">{{ $t('message.reset') }}</el-button>
              <el-button type="primary" @click="getApplyAbnormalList">{{ $t('message.filter') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="edu-page-title mg-top">学籍异动列表</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-row class="border-bottom" style="height:56px;">
        <el-col :span="18">
          <div class="empty-box"/>
        </el-col>
        <el-col :span="6">
          <div class="float-right">
            <el-button type="primary" @click="applyAbnormal()">申请</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="applyNoramls"
        size="mini"
        ref="studentsTable"
        @selection-change="handlerSelectionChange"
      >
        <el-table-column type="selection" stripe/>
        <el-table-column label="异动学期">
          <template slot-scope="scope">{{ scope.row.grade }}</template>
        </el-table-column>
        <el-table-column label="学号">
          <template slot-scope="scope">{{ scope.row.studentId }}</template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">{{ scope.row.studentName }}</template>
        </el-table-column>
       <el-table-column label="年级">
          <template slot-scope="scope">{{ scope.row.grade }}</template>
        </el-table-column>
        <el-table-column label="学院">
          <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
        </el-table-column>
        <el-table-column label="专业">
          <template slot-scope="scope">{{ scope.row.profession }}</template>
        </el-table-column>
        <el-table-column label="培养层次">
          <template slot-scope="scope">{{ scope.row.studentCategoryI18n }}</template>
        </el-table-column>
        <!-- <el-table-column label="是否国际学生">
          <template slot-scope="scope">{{ scope.row.studentCategoryI18n }}</template>
        </el-table-column> -->
        <el-table-column label="异动大类">
          <template slot-scope="scope">{{ scope.row.className }}</template>
        </el-table-column>
        <el-table-column label="异动类型">
          <template slot-scope="scope">{{ scope.row.typeName }}</template>
        </el-table-column>
        <el-table-column label="异动原因">
          <template slot-scope="scope">{{ scope.row.reason }}</template>
        </el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">{{ scope.row.effectiveTime | formatDate('yyyy-MM-dd') }}</template>
        </el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="scope.row.status==1" @click="check(scope.row)">审核</el-button>
            <el-button type="text" size="mini" v-else @click="viewDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="edu-pagination">
        <div class="float-right">
          <el-pagination
            :current-page="queryForm.pageNum_"
            :page-sizes="[20,50,100,500,1000]"
            :page-size="queryForm.pageSize_"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            style="float: right;margin:10px 60px 0 0;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import * as API from 'common/src/api/abnormal'
import { queryDic } from 'common/src/api/dictionary'
//初始化
export default {
  name: 'applyAbnormalList',
  data() {
    const getGrade = (function() {
      const now = new Date().getFullYear()
      const years = []
      for (let i = 0; i < 6; i++) {
        years.push({
          label: now - i,
          value: now - i,
        })
      }
      return years
    })()
    return {
      loading: false,
      formLabelWidth: '100px',
      applyNoramls: [],
      totalCount: 0,
      queryForm: {
        grade: '',
        classId: '',
        typeId: '',
        faculty: '',
        profession: '',
        trainingLevel: '',
        pageNum_: 1,
        pageSize_: 20,
      },
      options: {
        abnormalList: [],
        grade: getGrade,
        abnormalType: [],
        trainingLevel: [],
        faculty: [],
        studentCategory: [],
      },
    }
  },
  mounted() {
    this.getOptions()
    this.getApplyAbnormalList()
  },
  methods: {
    // 获取异动大类
    getOptions() {
      API.getAbnormalList()
        .then((response) => {
          if (response.code === 200) {
            _fill('abnormalList', response.data.list)
          } else throw response.code
        })
        .finally(() => (this.loading = false))
      const data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['X_PYCC', 'X_YX', 'X_PYLB'],
      }
      queryDic(data).then((res) => {
        if (res.code === 200) {
          this.fillSelect(res.data)
        }
      })
    },
    // 获取异动类型
    getAbnormalTypes() {
      API.getAbnormalTypes({ classId: this.queryForm.classId }).then(
        (response) => {
          if (response.code === 200) {
            _fill('abnormalType', response.data.list)
          } else throw response.code
        }
      )
    },
    // 获取申请异动列表
    getApplyAbnormalList() {
      API.getApplyAbnormalList(this.queryForm).then((response) => {
        if (response.code === 200) {
          this.applyNoramls = response.data.list
          this.totalCount = response.data.total_
        } else throw response.code
      })
    },
    //申请异动
    applyAbnormal() {
      this.$router.push({
        name: 'doApplyAbnormal'
      })
    },
    reset() {
      this.queryForm.grade = ''
      this.queryForm.classId = ''
      this.queryForm.typeId = ''
      this.queryForm.pageNum_ = 1
      this.queryForm.pageSize_ = 20
      this.onSubmit()
    },
    isAllKeyEmpty(obj = {}) {
      return !!Object.values(obj).join('')
    },
    fillSelect(data) {
      let { X_PYCC, X_YX, X_PYLB } = data
      this._fill('trainingLevel', X_PYCC)
      this._fill('faculty', X_YX)
      this._fill('studentCategory', X_PYLB)
      // this._fill("profession", data.G_ZY);
    },
    _fill(type, data) {
      for (const key in data) {
        this.options[type].push({
          value: key,
          label: data[key],
        })
      }
    },
    changeFaculty(val) {
      this.options['profession'] = []
      const data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: ['G_ZY'],
        filter: {
          prefix: [val],
          specilaCode: 'XY2ZY',
        },
      }
      queryDic(data).then((res) => {
        if (res.code === 200) this._fill('profession', res.data.G_ZY)
      })
    },
     viewDetail(row) {
      this.$router.push({
        name: 'doApplyAbnormal',
        abnormalId: row.id
      })
    },
    check(row) {
       this.$router.push({
        name: 'doApplyAbnormal',
        flagCheck: Date.parse(new Date())
      })
    }
  },
  computed: {
    ...mapState({
      mockUser: (state) => state.session.mockUser,
    }),
  },
}
</script>
<style>
</style>
